import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Tag, Row, Col, Collapse } from 'antd';

import ThirdVerify from './ThirdVerify/ThirdVerify';
import ImageDisplayer from './Attachment/ImageDisplayer';
import nopictures from '../../assets/nopictures3.svg';
import { solo } from '../../common/solo';
const Panel = Collapse.Panel;
const FormItem = Form.Item;


@connect(({ risk, apply }) => ({
  risk,
  apply,
}))
@Form.create()
export default class CustomerList extends PureComponent {

  constructor(props) {
    super(props);
  }

  state = {
    projectId: '',
  }

  componentDidMount() {
    this.setState({
      projectId: this.props.projectId
    })
  }

  renderPanelContent = (item, index) => {

    const { hideDocuments, hideThirdVerify } = this.props;
    const footerContent = this.wrapFooter(item, index);
    let { idcardFrontImg, idcardBackImg, authority, sign ,otherCredit} = item.attachs || item;
    const { attorneySignature } = this.props;
    idcardFrontImg = idcardFrontImg && idcardFrontImg.length > 0 ? idcardFrontImg[0] : null;
    idcardBackImg = idcardBackImg && idcardBackImg.length > 0 ? idcardBackImg[0] : null;
    authority = authority && authority.length > 0 ? authority[0] : null;
    sign = sign && sign.length > 0 ? sign[0] : null;
    otherCredit = otherCredit && otherCredit.length > 0 ? otherCredit[0] : null;
    return (
      <div>
        {!hideDocuments &&
          <Form layout="vertical" hideRequiredMark>
            <Row >
              <Col span={5}>
                <FormItem label="身份证正面" >
                  <Row >
                    {!idcardFrontImg ?
                      <img src={nopictures} style={{ width: '80px', height: '80px' }} />
                      :
                      <Col span={4}><ImageDisplayer src={solo.imgShow + idcardFrontImg} /></Col>
                    }
                  </Row>
                </FormItem>
              </Col>
              <Col span={5}>
                <FormItem label="身份证反面" >
                  {!idcardBackImg ?
                    <img src={nopictures} style={{ width: '80px', height: '80px' }} />
                    :
                    <Col span={4}><ImageDisplayer src={solo.imgShow + idcardBackImg} /></Col>
                  }
                </FormItem>
              </Col>
              {
                !attorneySignature ?//初审和复审不显示授权书和签字照
                  <div>
                    <Col span={5}>
                      <FormItem label="授权书" >
                        {!authority ?
                          <img src={nopictures} style={{ width: '80px', height: '80px' }} />
                          :
                          <Col span={4}><ImageDisplayer src={solo.imgShow + authority} /></Col>
                        }
                      </FormItem>
                    </Col>
                    <Col span={5}>
                      <FormItem label="签字照" >
                        {!sign ?
                          <img src={nopictures} style={{ width: '80px', height: '80px' }} />
                          :
                          <Col span={4}><ImageDisplayer src={solo.imgShow + sign} /></Col>
                        }
                      </FormItem>
                    </Col>
                    <Col span={4}>
                      <FormItem label="其他照片" >
                        {!sign ?
                          <img src={nopictures} style={{ width: '80px', height: '80px' }} />
                          :
                          <Col span={4}><ImageDisplayer src={solo.imgShow + otherCredit} /></Col>
                        }
                      </FormItem>
                    </Col>
                  </div>
                  :
                  null
              }
            </Row>
          </Form>}

        {!hideThirdVerify && this.renderThirdVerifyList(item, index)}
        {footerContent}
      </div>
    );
  };

  renderThirdVerifyList = (item, index) => {
    const creditList = this.wrapCreditList();
    if (creditList.length > 0) {
      const credit = creditList && creditList[index];
      const { verify } = credit;
      const { identityVerify, cheatVerify, creditVerify, creditScore } = verify;
      // console.log('credit=', credit);
      const item1 = {
        title: '个人身份认证',
        value: identityVerify,
        customerId: item.id,
        customerName: item.custName,
        customerIdCard: item.idcard,
        customerPhone: item.phone,
        projectId: this.props.projectId,
        thirdPartyQuery: this.props.thirdPartyQuery,
        type: 'identityVerify',
        // onClick: () => {
        //   console.log('ThirdVerify click');
        // }
      }
      const item2 = {
        title: '反欺诈筛查',
        value: cheatVerify,
        customerId: item.id,
        customerName: item.custName,
        customerIdCard: item.idcard,
        customerPhone: item.phone,
        projectId: this.props.projectId,
        thirdPartyQuery: this.props.thirdPartyQuery,
        type: 'cheatVerify',
        // onClick: () => {
        //   console.log('ThirdVerify click');
        // }
      }
      const item3 = {
        title: '人行征信',
        value: creditVerify,
        customerId: item.id,
        customerName: item.custName,
        customerIdCard: item.idcard,
        customerPhone: item.phone,
        projectId: this.props.projectId,
        thirdPartyQuery: this.props.thirdPartyQuery,
        type: 'creditVerify',
        // onClick: () => {
        //   console.log('ThirdVerify click');
        // }
      }
      const item4 = {
        title: '个人信用评分',
        value: creditScore,
        customerId: item.id,
        customerName: item.custName,
        customerIdCard: item.idcard,
        customerPhone: item.phone,
        projectId: this.props.projectId,
        thirdPartyQuery: this.props.thirdPartyQuery,
        type: 'creditScore',
        // onClick: () => {
        //   console.log('ThirdVerify click');
        // }
      }
      return <div >
        <Row gutter={4}>
          <Col span={6}><ThirdVerify item={item1} /></Col>
          <Col span={6}> <ThirdVerify item={item2} /></Col>
          <Col span={6}> <ThirdVerify item={item3} /></Col>
          <Col span={6}> <ThirdVerify item={item4} /></Col>
        </Row>
      </div>
    }
  }

  renderPanelTitle = (item, hindBusinessState) => {
    return (
      <Row>
        <Col span={4}>
          <span
            style={{
              fontWeight: 'strong',
              fontSize: '14px',
              marginRight: '10px',
            }}
          >
            {this.renderPanelTitleRelation(item)}
          </span>
        </Col>
        <Col span={3}>
          <Tag color="orange">{item.custName}</Tag>
        </Col>
        <Col
          span={6}
          style={{
            fontSize: '12px',
            color: '#999999',
          }}
        >
          身份证号: {item.idcard}
        </Col>
        {hindBusinessState && (
          <Col
            span={6}
            style={{
              fontSize: '12px',
              color: '#999999',
            }}
          >
            联系电话: {item.phone}
          </Col>
        )}
      </Row>
    );
  };

  renderPanelTitleRelation = item => {
    // console.log("renderPanelTitleRelation", item.relation)
    switch (item.relation && item.relation) {
      case 1:
        return '主申请人';
        break;
      case 2:
        return '共同还款人';
        break;
      case 3:
        return '担保人';
        break;
    }
  };


  render() {
    const customerList = this.wrapCustomerList();
    const defaultActiveKey = customerList && customerList.length > 0 ? customerList[0].id : null;
    return <div>
      <Collapse bordered={true} defaultActiveKey={defaultActiveKey} key={defaultActiveKey}>
        {customerList.map((item, index) => {
          return (
            <Panel key={item.id} header={this.renderPanelTitle(item, false)} key={item.id}>
              {this.renderPanelContent(item, index)}
            </Panel>
          );
        })}
      </Collapse>
    </div>;
  }

  wrapCustomerList = () => {
    const { apply: { applyListDetails } } = this.props;
    const { risk: { riskBusinessDetails, riskScreenDetails } } = this.props;
    let customerList = [];
    if (applyListDetails) {
      customerList = applyListDetails.customer;
    }
    if (riskBusinessDetails) {
      customerList = riskBusinessDetails.customerVerify.identityVerify.customers;
    }

    if (riskScreenDetails) {
      customerList = riskScreenDetails.customers;
    }

    return customerList;
  }

  wrapCreditList() {
    const { apply: { applyListDetails } } = this.props;
    const { risk: { riskBusinessDetails, riskScreenDetails } } = this.props;
    if (applyListDetails) {
      return applyListDetails.credit;
    }

    if (riskBusinessDetails) {
      return riskBusinessDetails.creditVerify;
    }

    if (riskScreenDetails) {
      return riskScreenDetails.customers;
    }

    //return creditList;
  }

  wrapFooter = (item, index) => {
    const customerFooter = this.props.customerFooter;
    let footerContent = null;
    if (customerFooter != null) {
      if (typeof customerFooter === "function") {
        footerContent = customerFooter(item, index);
      }
      else {
        footerContent = customerFooter;
      }
    }
    return footerContent;
  }
}
